<html lang="zh-CN">
<meta charset="UTF8"/>
<head>

    <style>
        /* 载入自定义字体，需要与游戏中的字体同步,注意字体名称 */
        /* @font-face {
            font-family:custom-font ;
            src: url(./customFont.ttf);
        } */
        /*全局使用自定义字体*/
        /* body{
            font-family: custom-font;
        } */
        table {
            width: auto;
        }
        
        table,
        th,
        tr {
            border-collapse: collapse;
            min-height: 36px;
        }
        
        td {
           
            border: 1px solid white;
            border-collapse: collapse;
            text-align: center;
        }

        input[type=checkbox] {
            transform: scale(1.5);

        }

        .float {
            width: fit-content;
            height: fit-content;
            position: fixed !important;
            position: absolute;
            z-index: 5;
            background-color: #2C3539;
            color: white;
            padding: 10px;
            border: white 2px solid;
        }

        /* 编辑框中插入字符按钮样式 */
        .btnInsert {
           
            background-color: black;
            border-color: #888888;
            padding: 8px;
            font-size: large;
        }
        
      
    </style>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>

</head>
<title>暗黑2重制版mod物品过滤编辑</title>

<body style="color: white;background-color: black;">

    <script>
        //用于cnTrans.js是否载入
        var isCnTrans = false;
        /*
            item{
                id:num
                Key
                enUS
                zhTW
                zhCN
                .....
            }
        */
        let tableColor = []; //颜色表
        tableColor['ÿc0'] = '#ffffff';
        tableColor['ÿc1'] = '#ff5656';
        tableColor['ÿc2'] = '#00ff00';
        tableColor['ÿc3'] = '#7a7aff';
        tableColor['ÿc4'] = '#d1bd7e';
        tableColor['ÿc5'] = '#767676';
        tableColor['ÿc6'] = '#000000';
        tableColor['ÿc7'] = '#d9c985';
        tableColor['ÿc8'] = '#ffb100';
        tableColor['ÿc9'] = '#ffff64';
        tableColor['ÿc:'] = '#009300';
        tableColor['ÿc;'] = '#c300ff';
        tableColor['ÿc?'] = '#ffff64';
        tableColor['ÿc@'] = '#ffb100';
        tableColor['ÿc<'] = '#00d700';
        tableColor['ÿc='] = '#f3f3f3';
        tableColor['ÿc>'] = '#d1bd7e';
        tableColor['ÿcA'] = '#009300';
        tableColor['ÿcB'] = '#7a7aff';
        tableColor['ÿcC'] = '#00ff00';
        tableColor['ÿcD'] = '#d1bd7e';
        tableColor['ÿcE'] = '#f3f3f3';
        tableColor['ÿcF'] = '#f3f3f3';
        tableColor['ÿcG'] = '#000000';
        tableColor['ÿcH'] = '#899b9d';
        tableColor['ÿcI'] = '#b7bfff';
        tableColor['ÿcJ'] = '#ffb100';
        tableColor['ÿcK'] = '#707070';
        tableColor['ÿcL'] = '#ffb100';
        tableColor['ÿcN'] = '#00b5eb';
        tableColor['ÿcO'] = '#ff89ff';
        tableColor['ÿcP'] = '#b3b3ff';
        tableColor['ÿcQ'] = '#00ff00';
        tableColor['ÿcR'] = '#ffff78';
        tableColor['ÿcS'] = '#e14848';
        tableColor['ÿcT'] = '#8bcdff';
        tableColor['ÿcU'] = '#ff0000';
        //特殊颜色，在编辑框中靠前有额外的说明
        let specColors = {
            'ÿc2': '套装',
            'ÿc4': '暗金',
            'ÿc9': '亮金',
        }
        //用于文本编辑时可能用到的特殊字符
        let specChars = "←↓↖↙↑↗→↘★▢▣■▲▼●◉◆◒◓◐◑◗◖◧◨◯◬▙▛▜▟╳╲╱┢┣┤┥┦┧┨┩┪┫┬┭┮┯┰┱┲┳┴┵┶┷┸┹┺┻┼┽┾┿╀╁╂╃╄╅╆╇╈╉╊╋═║╒╓╔╕╖╗╘╙╚╛╜╝╞╟╠╡╢╣╤╥╦╧╨╩╪╫╬╭╮╯╰";

        //全局对象，存贮json转化来的对象
        let names = [];
        let jsonFileName="";
        //额外上下文，用于存贮是否显示，是否屏蔽等等
        let itemCtxs = {};
        //所有显示的物品keys列表，除此之外的set unique rare npc 字符串无需编辑
        let equipKeyStr =
            //以下是基础物品类key串
            "cap;xap;uap;skp;xkp;ukp;hlm;xlm;ulm;fhl;"
            + "xhl;uhl;ghm;xhm;uhm;crn;xrn;urn;msk;xsk;"
            + "usk;bhm;xh9;uh9;ci0;ci1;ci2;ci3;qui;xui;"
            + "uui;lea;xea;uea;hla;xla;ula;stu;xtu;utu;"
            + "rng;xng;ung;scl;xcl;ucl;chn;xhn;uhn;brs;"
            + "xrs;urs;spl;xpl;upl;plt;xlt;ult;fld;xld;"
            + "uld;gth;xth;uth;ful;xul;uul;aar;xar;uar;"
            + "ltp;xtp;utp;buc;xuc;uuc;sml;xml;uml;lrg;"
            + "xrg;urg;kit;xit;uit;tow;xow;uow;gts;xts;"
            + "uts;bsh;xsh;ush;spk;xpk;upk;lgl;xlg;ulg;"
            + "vgl;xvg;uvg;mgl;xmg;umg;tgl;xtg;utg;hgl;"
            + "xhg;uhg;lbt;xlb;ulb;vbt;xvb;uvb;mbt;xmb;"
            + "umb;tbt;xtb;utb;hbt;xhb;uhb;lbl;zlb;ulc;"
            + "vbl;zvb;uvc;mbl;zmb;umc;tbl;ztb;utc;hbl;"
            + "zhb;uhc;dr1;dr6;drb;dr2;dr7;drc;dr3;dr8;"
            + "drd;dr4;dr9;dre;dr5;dra;drf;ba1;ba6;bab;"
            + "ba2;ba7;bac;ba3;ba8;bad;ba4;ba9;bae;ba5;"
            + "baa;baf;pa1;pa6;pab;pa2;pa7;pac;pa3;pa8;"
            + "pad;pa4;pa9;pae;pa5;paa;paf;ne1;ne6;neb;"
            + "ne2;ne7;nec;ne3;ne8;ned;ne4;ne9;nee;ne5;"
            + "nea;nef;hax;9ha;7ha;axe;9ax;7ax;2ax;92a;"
            + "72a;mpi;9mp;7mp;wax;9wa;7wa;lax;9la;7la;"
            + "bax;9ba;7ba;btx;9bt;7bt;gax;9ga;7ga;gix;"
            + "9gi;7gi;clb;9cl;7cl;spc;9sp;7sp;mac;9ma;"
            + "7ma;mst;9mt;7mt;fla;9fl;7fl;whm;9wh;7wh;"
            + "mau;9m9;7m7;gma;9gm;7gm;ssd;9ss;7ss;scm;"
            + "9sm;7sm;sbr;9sb;7sb;flc;9fc;7fc;crs;9cr;"
            + "7cr;bsd;9bs;7bs;lsd;9ls;7ls;wsd;9wd;7wd;"
            + "2hs;92h;72h;clm;9cm;7cm;gis;9gs;7gs;bsw;"
            + "9b9;7b7;flb;9fb;7fb;gsd;9gd;7gd;dgr;9dg;"
            + "7dg;dir;9di;7di;kri;9kr;7kr;bld;9bl;7bl;"
            + "tkf;9tk;7tk;tax;9ta;7ta;bkf;9bk;7bk;bal;"
            + "9b8;7b8;jav;9ja;7ja;pil;9pi;7pi;ssp;9s9;"
            + "7s7;glv;9gl;7gl;tsp;9ts;7ts;spr;9sr;7sr;"
            + "tri;9tr;7tr;brn;9br;7br;spt;9st;7st;pik;"
            + "9p9;7p7;bar;9b7;7o7;vou;9vo;7vo;scy;9s8;"
            + "7s8;pax;9pa;7pa;hal;9h9;7h7;wsc;9wc;7wc;"
            + "sbw;8sb;6sb;hbw;8hb;6hb;lbw;8lb;6lb;cbw;"
            + "8cb;6cb;sbb;8s8;6s7;lbb;8l8;6l7;swb;8sw;"
            + "6sw;lwb;8lw;6lw;lxb;8lx;6lx;mxb;8mx;6mx;"
            + "hxb;8hx;6hx;rxb;8rx;6rx;sst;8ss;6ss;lst;"
            + "8ls;6ls;cst;8cs;6cs;bst;8bs;6bs;wst;8ws;"
            + "6ws;wnd;9wn;7wn;ywn;9yw;7yw;bwn;9bw;7bw;"
            + "gwn;9gw;7gw;scp;9sc;7sc;gsc;9qs;7qs;wsp;"
            + "9ws;7ws;ktr;9ar;7ar;wrb;9wb;7wb;axf;9xf;"
            + "7xf;ces;9cs;7cs;clw;9lw;7lw;btl;9tw;7tw;"
            + "skr;9qr;7qr;ob1;ob6;obb;ob2;ob7;obc;ob3;"
            + "ob8;obd;ob4;ob9;obe;ob5;oba;obf;am1;am6;"
            + "amb;am2;am7;amc;am3;am8;amd;am4;am9;ame;"
            + "am5;ama;amf;amu;rin;jew;cm1;cm2;cm3;";
        //杂物类key串
        let otherKeyStr =
            "gpl;opl;gpm;opm;gps;ops;tsc;isc;vps;yps;"
            + "rvs;rvl;wms;aqv;cqv;key;gcv;gfv;"
            + "gsv;gzv;gpv;gcy;gfy;gsy;gly;gpy;gcb;gfb;"
            + "gsb;glb;gpb;gcg;gfg;gsg;glg;gpg;gcr;gfr;"
            + "gsr;glr;gpr;gcw;gfw;gsw;glw;gpw;hp1;hp2;"
            + "hp3;hp4;hp5;mp1;mp2;mp3;mp4;mp5;skc;skf;"
            + "sku;skl;skz;gld;";
        let equipKeys = equipKeyStr.split(";");
        let otherKeys = otherKeyStr.split(";");
        //三种文本类型
        //未定义,在item-names.json中表示暗金，套装，词缀及其他
        const ITEM_TYPE_UNDEFINED = 0;
        //装备底材
        const ITEM_TYPE_EQUIP = 1;
        //其他杂物
        const ITEM_TYPE_OTHER = 2;

        //编辑框上下文
        let editPanelCtx = {
        id: 0,
        Key: "",
        lang: "zhTW",
        item: null,
        autoTrans: true
       }
//以下的屏蔽方案，物品价值，底材对应暗金，套装等类容在外部的filterData.js中设定
        //屏蔽方案列表
        let banPlans= [{
            label:'开荒不屏蔽',
            value:'none',
            keys:[]
        }]
        //物品的价值信息
        let valuableKeys={};
        let baseUniKeys={};
        let baseSetKeys={};
        
       

        //对象转化到表格内容，如果已经屏蔽就勾选上屏蔽
        function formatItemToTableLine(item) {
            let valuable = '-';
            let baseUni = '-';
            let baseSet = '-';
            //价值信息列
            if (valuableKeys[item.Key] != null) {
                valuable = valuableKeys[item.Key];
            }
            //暗金信息列
            if(baseUniKeys[item.Key]!=null){
                baseUni =baseUniKeys[item.Key];

            }
            if(baseSetKeys[item.Key]!=null){
                baseSet = baseSetKeys[item.Key];
            }
            
            return '<tr id="tr_' + item.id + '">'
                + '<td id="ban" ><input type="checkbox"/ id="cb_' + item.id + '" /></td>'
                + `<td id="edit"><button onclick='openPanelEdit(${item.id},"zhTW")'>编辑</button></td>`
                + '<td id="id" >' + item.id + '</td>'
                + "<td id='zhTW'>" + D2TextToCell(item.zhTW) + "</td>"
                + "<td id='zhCN'>" + D2TextToCell(item.zhCN) + "</td>"
                + "<td id='enUS'>" + D2TextToCell(item.enUS) + "</td>"
                + '<td id="Key">' + D2TextToCell(item.Key) + "</td>"
                + '<td>' + valuable + '</td>'
                + `<td style='color:#d1bd7e'>${baseUni}</td>`
                +`<td style='color:#00ff00'>${baseSet}</td>`
                + "</tr>";
        }
        //将暗黑2文本转化为一个单元内的html代码
        function D2TextToCell(text) {
            let coloredHtmlText = D2ColorToFont(text);
            return D2BackLineFormat(coloredHtmlText);
        }
        //将暗黑2的颜色代码转化为html标签表示的代码
        function D2ColorToFont(text) {
            let rst = "";
            //用正则匹配一段颜色代码后跟的文本，直到下一个颜色代码或者结束前
            let matchD2texts = ("" + text).match(/(ÿc[0-9;:\<\>\=\?@A-U]|^)[\s\S]*?(?=ÿc[0-9;:\<\>\=\?@A-U]|$)/g);
            if (matchD2texts != null) {
                matchD2texts.forEach(m => {
                    if (/ÿc[0-9;:\<\>\=\?@A-U]/g.test(m)) {
                        //匹配出一段中的颜色代码部分
                        let cd = m.match(/ÿc[0-9;:\<\>\=\?@A-U]/g)[0];
                        //将颜色代码部分替换为html标签开头，文本部分保持不变，并在最后加上标签结尾
                        rst += m.replace(cd, `<span style="color:${tableColor[cd]}">`) + "</span>";

                    } else {
                        rst += m;
                    }
                })
                return rst;
            }
            return text;

        }
        //暗黑2中文本\n换行，行序倒转,注意需要处理染色标签 span对之间的br
        function D2BackLineFormat(text) {
            let toSplitText = '';
            //备皮，匹配每一个span标签，或是无标签文本，并在有标签匹配中，检测其中是否有\n，如果有，那么在两侧分别加上span的结束和开始
            let matchSpanTags = ('' + text).match(/(<span(([\s\S])*?)<\/span>)|([\s\S]+?(?=<|$))/g)
            if (null != matchSpanTags) {
                matchSpanTags.forEach(m => {
                    let spanStart = m.match(/<span.*>/);
                    if (spanStart != null) {
                        //如果有标签
                        if (/\n/g.test(m)) {
                            //如果有换行符
                            toSplitText += m.replaceAll('\n', '</span>\n' + spanStart);
                        } else {
                            toSplitText += m;
                        }
                    }
                    else {
                        toSplitText += m;
                    }
                })
            }

            let lines = ("" + toSplitText).split("\n");
            let rst = "";
            let nextLineColorTab = "";
            if (lines.length > 1) {
                for (let i = lines.length - 1; i > 0; i--) {
                    rst += lines[i] + "<br/>";
                }
            };
            rst += lines[0];

            return rst;
        }
        //根据所给的id刷新表格行
        function refreshTableRowById(id) {
            let item = null;
            for (let i in names) {
                if (names[i].id == id) {
                    item = names[i];
                    break;
                }
            }
            $(`#table #tr_${id} #zhTW`).html(D2TextToCell(item.zhTW));
            $(`#table #tr_${id} #zhCN`).html(D2TextToCell(item.zhCN));
            $(`#table #tr_${id} #enUS`).html(D2TextToCell(item.enUS));
        }

        //根据选择的key和lang打开或者刷新编辑面板
        function openPanelEdit(id, lang) {
            let item = null;
            for (let i in names) {
                if (names[i].id == id) {
                    item = names[i];
                    break;
                }
            }
            if (null == item) {
                alert("找不到key对应的物品");
                return;
            }
            editPanelCtx.id = id;
            editPanelCtx.lang = lang;
            editPanelCtx.item = item;
            $('#panelEdit #Key').html(item.Key);
            let d2text = item[lang];

            let d2textEdit = $('#panelEdit #d2text');
            d2textEdit.val(d2text);
            refreshEditResult();
            $('#panelEdit').show();
        }
        //刷新编辑框中的结果
        function refreshEditResult() {
            let d2text = $('#panelEdit #d2text').val();
            let rst = D2TextToCell(d2text, true)
            $('#panelEdit #result').html(rst);
        }
        //编辑框，在光标处插入
        function insertAtCur(text) {

            let d2textDom = $('#panelEdit #d2text')[0];
            if (d2textDom.selectionStart || d2textDom.selectionStart == '0') {
                let start = d2textDom.selectionStart;
                let end = d2textDom.selectionEnd;
                let curtVal = d2textDom.value;
                d2textDom.value = curtVal.substring(0, start) + text + curtVal.substring(end, curtVal.length);
                d2textDom.focus();
                refreshEditResult();
                d2textDom.selectionStart = start + text.length;
                d2textDom.selectionEnd = start + text.length;
            } else {
                d2textDom.value += text;
                d2textDom.focus();
                refreshEditResult();
            }

        }
        //指定id编辑框转繁体
        function editTrans2Trad(id) {
            let raw = $(id).val();
            rst = traditionalized(raw);
            $(id).val(rst);
            refreshEditResult();

        }
        //指定id编辑框转简体
        function editTrans2Simp(id) {
            let raw = $(id).val();
            rst = simplized(raw);
            $(id).val(rst);
            refreshEditResult();
        }
        //保存编辑结果
        function saveEdit() {
            let d2text = $('#panelEdit #d2text').val();

            if (null != editPanelCtx.item) {
                editPanelCtx.item[editPanelCtx.lang] = d2text;
            }
            //如果勾选了自动同步
            if ($('#panelEdit #autoSync').is(':checked')) {
                let activeLang = editPanelCtx.lang;
                if (activeLang =='zhCN'||activeLang=='zhTW'){
                    let tarLang = activeLang=='zhTW'?'zhCN':'zhTW';
                    editPanelCtx.item[tarLang]= editPanelCtx.item[activeLang];
                }
            }
            //如果勾选了自动翻译
            if ($('#panelEdit #autoTrans').is(':checked')) {
                let twRaw = editPanelCtx.item['zhTW'];
                editPanelCtx.item['zhTW'] = traditionalized(twRaw)
                let cnRaw = editPanelCtx.item['zhCN'];
                editPanelCtx.item['zhCN'] = simplized(cnRaw);
            }

            let id = editPanelCtx.id;
            refreshTableRowById(id);
            $('#panelEdit').hide();
        }
        //从文件读取完整的物品名json
        function readCompNames(files) {
            $("#table").empty();
            $("#lineFilter").hide();            //包含过滤器的行显示
            $("#floatBtnGen").hide();           //包含生成按钮的行显示
            if (files.length) {
                let file = files[0];
                if (/json/.test(file.type)) {
                    let reader = new FileReader();
                    reader.onload = function () {
                        jsonFileName = file.name;

                        $("#table").append('<tr id="head"><th>屏蔽</th><th>编辑</th><th>id</th> <th>zhTW繁体中文</th> <th>zhCN简体中文</th> <th>enUS英文</th> <th>Key</th><th>价值信息</th> <th>暗金</th><th>套装</th></tr>');
                        //去除双斜杠注释
                        let sign = new RegExp("//.*", "gm");
                        let rmSign = this.result.replace(sign, "");
                        //console.log(rmSign);
                        names = JSON.parse(rmSign); //讲json转化为item列表

                        //表格生成所有项目
                        names.forEach(item => {
                            $("#table").append(formatItemToTableLine(item));
                            let type = ITEM_TYPE_UNDEFINED;
                            if (equipKeys.find(k => k == item.Key)) {
                                type = ITEM_TYPE_EQUIP;
                            } else if (otherKeys.find(k => k == item.Key)) {
                                type = ITEM_TYPE_OTHER;
                            }
                            itemCtxs[item.id] = {
                                display: true,
                                banned: false,
                                type
                            }
                        });
                        //编辑item-names文件时默认不显示uniset
                        $("#undefinedShow").prop("checked",true);
                        //根据内容特征判定是不是item-names.json文件
                        //如果是就默认关闭底材外物品显示，避免表格过于庞大
                        if (names.find(i=>i.id==1930)){
                            $("#undefinedShow").prop("checked",false);
                        }
                        $("#toolModeSelect").show();
                        $("#lineFilter").show();            //包含过滤器的行显示
                        $("#floatBtnGenPlan").show();           //包含生成按钮的行显示
                        filterTable(); 
                        refreshTrColor();

                        //$("#fileContent").append("<pre>"+this.result.replace("\n","<br/>")+"</pre>");
                        $("#table tr:not(#head)").children().find('input[type="checkbox"]').change(function () {   //给选择框注册刷新颜色事件
                            let cb = $(this)[0];
                            let id = + (cb.id.match(/\d+$/));
                            itemCtxs[id].banned = cb.checked;
                            refreshTrColor();
                        })
                        //表格hover事件，鼠标悬停在一行上后改变颜色
                        $("table tr:not(#head)").hover((evt) => {
                            let id = evt.currentTarget.id;
                            $("#" + id).css("background-color", "#006060");//加深水鸭色
                        }, () => {
                            refreshTrColor();
                        })
                        
                        
                    };
                    reader.readAsText(file);
                } else {

                    alert("打开错误，目标不是一个json文件")
                }

            }

        }
        function loadBanPlanFromFile(files){
       //包含生成按钮的行显示
            if (files.length) {
                let file = files[0];
                if (/json/.test(file.type)) {
                    let reader = new FileReader();
                    reader.onload = function () {
                         //去除双斜杠注释
                        let sign = new RegExp("//.*", "gm");
                        let rmSign = this.result.replace(sign, "");
                        let  fromFileItems = JSON.parse(rmSign); //讲json转化为item列表
                        //表格生成所有项目
                        fromFileItems.forEach(fi => {
                            let item= itemCtxs[fi.id];
                            if (null!=item){
                                //判断为空的简单方法，鉴于各mod方案的复杂性，只要有一个为空就判断为屏蔽
                                if (/^\s*$/g.test(fi.enUS)||/^\s*$/g.test(fi.zhCN)||/^\s*$/g.test(fi.zhTW)) {
                                    item.banned=true;
                                    $(`#table #cb_${fi.id}`).prop("checked",true);  
                                }
                              
                                                         
                            }
                            /* 这里是错误检查，暂时不使用
                            else{
                                alert("载入文件和源文件内容不符")
                                return;
                            }*/
                        });
                        filterTable();
                        refreshTrColor();

                    };
                    reader.readAsText(file);
                } else {

                    alert("打开错误，目标不是一个json文件")
                }

            }
        }
        //载入字体并应用到body标签
        function loadBodyFont(files){
            if (files.length) {
                let file = files[0];

                if (/(\.ttf)|(\.TTF)/.test(file.name)) {
                   let url= window.URL.createObjectURL(file);
                   let fontFace = new FontFace("custom-font",`local('custom-font'),url('${url}')`);
                   fontFace.load().then(font=>{
                    document.fonts.add(font);
                    $("body").css("font-family","custom-font");
                   });
                } else {

                    alert("打开错误，目标不是一个字体文件")
                }

            }
        }
        //载入预制方案 
        function loadBanPlan(planVal){
            $("#table tr:not(#head) input").removeAttr("checked");
            let toCheckedKeys = [];
            for (let i in banPlans){
                let plan= banPlans[i];
                if (plan.value ==planVal){
                    toCheckedKeys= plan.keys;
                    break;
                }
            }
            $("#table tr:not(#head)").each(function () {
                let key = $(this).children("#Key").text();
                let isChecked=false;
                if (toCheckedKeys.find(k => key == k)) {
                    //console.log($(this).find("input[type='checkbox']").prop("checked"));
                   isChecked=true;
                }
                $(this).find("input[type='checkbox']").prop("checked", isChecked);
            })
            refreshTrColor();
        }
        //获取所选择的工具模式
        function getToolMode(){
            return $("input[name='toolMode']:checked").val();
        }

        //按条件过滤表格
        function filterTable() {
            //根据工具的模式选择隐藏显示列
            let mode = getToolMode();
            if ("ban"==mode){
                $("#table td:nth-child(2)").hide(); //编辑按钮列
                $("#table td:nth-child(1)").show(); //屏蔽勾选列
               // $("#table td:nth-child(8)").show(); //价值信息列
                //下面是表头
                $("#table th:nth-child(2)").hide();
                $("#table th:nth-child(1)").show();
              //  $("#table th:nth-child(8)").show();
            }else if ("edit"==mode){
                $("#table td:nth-child(1)").hide();
                $("#table td:nth-child(2)").show();
               // $("#table td:nth-child(8)").hide();
                $("#table th:nth-child(1)").hide();
                $("#table th:nth-child(2)").show();
               // $("#table th:nth-child(8)").hide();
            }
            //隐藏所有表格
            $("#table tr:not(#head)").hide();
            for (let i in itemCtxs) {

                let item = itemCtxs[i];
                //未定义项目
                if (item.type == ITEM_TYPE_UNDEFINED) {
                    item.display = $("#undefinedShow").is(":checked");

                }
                //装备底材项目
                if (item.type == ITEM_TYPE_EQUIP) {
                    item.display = $("#equipShow").is(":checked");
                }

                //杂物项目
                if (item.type == ITEM_TYPE_OTHER) {
                    item.display = $("#otherShow").is(":checked");
                }
                //在已经显示的范围内再进行屏蔽筛选
                if (item.display) {
                    //如果装备已经屏蔽
                    if (item.banned) {
                        item.display = $("#banShow").is(":checked");

                    } else {
                        item.display = $("#notBanShow").is(":checked");
                    }
                }

            }
            //显示所有display为真的条目
            for (let id in itemCtxs) {
                if (itemCtxs[id].display) {
                    $(`#table #tr_${id}`).show();
                }

            }
            //在所有类别项目显示的基础上进行关键字过滤
            let keyword = $("#keyword").val();
            $("#table tr:not(#head):visible").stop().hide().filter(":contains('" + keyword + "')").show();

        }

        //刷新表格所有颜色
        function refreshTrColor() {
            $("#table tr:visible:even").css("background-color", "#2C3539");//间隔颜色gunmetal
            $("#table tr:visible:odd").css("background-color", "black");
            $("#table tr:visible").has("input:checked").css("background-color", "darkred");
        }
        //关键字搜索
        function keywordSearch() {
            filterTable();
            refreshTrColor();
        }

        function genPlan() {
            let planStr = "";
            $("table tr:not(#head)").has("input:checked").each(function () {
                planStr += $(this).children("#Key").text() + ';';
            })

            $("#floatPlan #planStr").text(planStr);
            $("#floatPlan").show();

        }
        //生成结果json
        function genJson() {
            let json = "";
            $("#floatJson").show();
            $("#standBy").show();
            let namesCopy = JSON.parse(JSON.stringify(names));
            //对于所有选中的项目进行屏蔽操作
            $("table tr:not(#head)").has("input:checked").each(function () {
                let key = $(this).children("#Key").text();
                //console.log("banKey:"+key);
                for (let i = 0; i < namesCopy.length; i++) {
                    let n = namesCopy[i];
                    if (n.Key == key) {
                        //console.log(n);
                        n.enUS = "";
                        n.zhCN = "";
                        n.zhTW = "";
                        break;
                    }
                }
            })
            json = JSON.stringify(namesCopy, null, 2);
            $("#floatJson #jsonStr").text(json);
            $("#standBy").hide();
        }


        //下载文本
        function downloadText(name,text){
            var elDownload = document.createElement('a');
            elDownload.download=name;
            elDownload.style.display='none';
            elDownload.href = URL.createObjectURL(new Blob([text]));
            document.body.appendChild(elDownload);
            elDownload.click();
            document.body.removeChild(elDownload);
        }


        $(document).ready(function () {
            //生成屏蔽方案选项
            banPlans.forEach((plan)=>{
                $("#plan").append(
                    `<option value="${plan.value}">${plan.label}</option>`
                )
            });
            //注册关键字文本框回车事件
            $("#keyword").keyup((evt) => {
                if (evt.keyCode == 13) {
                    filterTable();
                    refreshTrColor();
                }
            })
            //隐藏一些子面板
            $("#toolModeSelect").hide();
            $("#lineFilter").hide();
            $("#floatBtnGenPlan").hide();
            $('#panelEdit').hide();
            //编辑框文本变更事件
            $("#panelEdit #d2text").keyup(() => {
                refreshEditResult();
            });
            $("input[name='toolMode']").change(()=>{
                filterTable();
            });
            //生成JSON按钮事件
            $("#btnGenPlan").click(() => {
                //如果是屏蔽模式显示屏蔽key的列表，编辑模式直接跳过
                let mode = getToolMode();
                if ("ban"==mode){
                    genPlan();
                }else{
                    genJson();
                }
                
            });
            //拷贝方案keys按钮（已经隐藏）
            $("#floatPlan #btnCopy").click(() => {
                let planStr = document.getElementById("planStr");
                planStr.select();
                document.execCommand("copy");
                alert("已复制");
            })
            //生成json按钮
            $("#floatPlan #btnGenJson").click(() => {

                genJson();

            })
            $("#floatPlan #btnCopy").hide(); //正式版隐藏了这个复制按钮防止误操作
            $("#floatPlan").hide();
            //复制最终json按钮
            $("#floatJson #btnCopy").click(() => {
                let jsonStr = document.getElementById("jsonStr");
                jsonStr.select();
                document.execCommand("copy");
                alert("已复制");
            })
            $("#floatJson #btnSave").click(()=>{
                let jsonText = $("#jsonStr").val();
                downloadText(jsonFileName,jsonText);
            })

            $("#floatJson").hide();
            $("#standBy").hide();
            //注册所有checkbox事件
            $("#lineFilter input[type ='checkbox']").change(() => {
                filterTable();
                refreshTrColor();
            })


            //预制方案下拉框事件
            $("#plan").change(() => {
                loadBanPlan($("#plan").val());
            })
            //编辑框中的保存光标定位方法
            $("#panelEdit #d2text").focusout((evt) => {
                let _this = $(this)[0];
                range = window.getSelection().getRangeAt(0);
            })
            //生成编辑框中的颜色按钮
            let btnCur = 0;
            for (let code in tableColor) {
                var color = tableColor[code];
                $('#panelEdit #btnsColor').append(
                    `<span style="display:inline-block;width:75px;text-align:left;">${code + '&nbsp;'}<button class="btnInsert" style="color:${color};float:right;height:36px;" onclick="insertAtCur('${code}')">◉</button></span>`
                );
                btnCur++;
                if (btnCur % 6 == 0) {
                    $('#panelEdit #btnsColor').append("<br/>");
                }
            }
            //生成编辑框中的特殊字符按钮
            let arrSpecChar = specChars.split("");
            for (let i in arrSpecChar) {
                var char = arrSpecChar[i];
                $('#panelEdit #btnsChar').append(
                    `<span sytle="display:inline-block;width:40px;">
                            ${char}<button class="btnInsert" style="color:white;height:48px;width:48px" onclick="insertAtCur('${char}')">+</button>
                        </span>`
                );
                if ((+(i) + 1) % 9 == 0) {
                    $('#panelEdit #btnsChar').append("<br/>");
                }
            }
            //检测cnTrans.js是否载入
            if (!isCnTrans) {
                alert("繁简转化代码 cnTrans.js 未成功载入，请放置该文件与编辑器同一文件夹");
            }

        }

        );
    </script>
    <script src="./filterData.js"></script>
    <script src="./cnTrans.js"> </script>

    <h1>暗黑破坏神2重制版：地面物品软屏蔽MOD编辑器</h1><br />
    verson 0.6.1  2022/09/02 BY ghostweo@qq.com  &nbsp;&nbsp;&nbsp;&nbsp;
    <a href="./README.txt" target="_blank" style="color: gold;">[说明]</a>

     <br/>
    在使用过程中遇到的bug，或有修改建议请发邮件或者在论坛发布楼回复.<br/>
    <a href="https://gitee.com/ghostweo/d2r-item-filter" target="_blank" style="color: gold;">gitee仓库地址</a>
    <hr />
    <!--说明部分-->
    *要使用这个编辑器，首先你需要一个文本增强MOD作为<span style="color: gold;">基底.</span><br>
    &nbsp;&nbsp;&nbsp;&nbsp;推荐MOD&nbsp;<a href="https://bbs.d.163.com/forum.php?mod=viewthread&tid=174577212" target="_blank" style="color: gold;">wing</a>&nbsp;&nbsp;或&nbsp;<a  href="http://www.impk.cc/ShowTopic-8572603-16.php?type=dyn" target ="_blank" style="color: gold;">dfcn</a>
    &nbsp;&nbsp;<a href="https://bbs.d.163.com/forum.php?mod=viewthread&tid=174751487" target ="_blank" style="color: gold;">免登</a><br/>
    &nbsp;&nbsp;&nbsp;&nbsp;或者MOD&nbsp;<a href="https://bbs.d.163.com/forum.php?mod=viewthread&tid=174019384" target="_blank" style="color: gold;">will</a> 前提你会使用MPQEditor解包.<br/>
    *MOD的设置方法请参见上面的链接<br />
    
   
    *<span style="color: red;">注意:</span>由于重制版程序限制，被屏蔽的物品依旧在<span style="color: gold;">*同屏最多显示32个物品限制*</span>内->即同一个屏幕上最多显示32件物品，不论屏蔽与否.<br/>
    也就是说<span style="color: gold;">*就算用了垃圾过滤，你也有可能错过重要物品*</span>。</br>
    *所以重要物品请使用mod的光柱标记.同时在游戏中，同屏物品过多时尽量拾取所有金币，或是在物品堆外缘移动.<br />
    <hr />
    选择<span style="color:gold">物品模板文件</span>：<input type="file" onchange="readCompNames(this.files)" /><br />
    *<span style="color:gold">物品模板文件</span>指包含完整地面物品名(不包括符文)列表，未经修改的item-names.json文件.许多此类mod都提供了不同版本的json文件，请阅读对应说明.</span><br />
    *以MOD Wing为例:默认位置为-游戏根目录\mods\wing\wing.mpq\data\local\lng\strings\item-names.json<br />
    <br/>
    载入mod自定义字体<input type = "file" onchange="loadBodyFont(this.files)"/><br/>
    *在本工具内载入自定义字体并不能使得游戏内应用相同字体。替换字体请参阅相关教程
    <hr/>
    <div id="toolModeSelect">
        <span style="color: gold;">请选择工具的使用模式&nbsp;</span>
        <input name="toolMode" value="ban" type="radio" checked/>屏蔽模式
        <input name="toolMode" value="edit" type="radio"/>编辑模式
       
        <hr/>
    </div>
    <div id="lineFilter">
        选择屏蔽方案&nbsp;
        <select id="plan">
            <!-- <option value="none">开荒不屏蔽</option>
            <option value="wing">[wing]屏蔽垃圾</option>
            <option value="dfcnStd">[dfcn]标准屏蔽</option>
            <option value="dfcnStdMana">[dfcn]标准屏蔽+保留蓝回辨箭</option> -->
        </select>
        从已经编辑的json文件载入<input type="file" onchange="loadBanPlanFromFile(this.files)"/>
        <hr />
        <input id="undefinedShow" type="checkbox" checked/>显示暗金、套装、词缀等未分类物品&nbsp;&nbsp;&nbsp;&nbsp;
        <input id="equipShow" type="checkbox" checked />显示基础物品&nbsp;&nbsp;&nbsp;&nbsp;
        <input id="otherShow" type="checkbox" checked />显示杂物&nbsp;&nbsp;&nbsp;&nbsp;
        <input id="banShow" type="checkbox" checked />显示已屏蔽&nbsp;&nbsp;&nbsp;&nbsp;
        <input id="notBanShow" type="checkbox" checked />显示未屏蔽&nbsp;&nbsp;&nbsp;&nbsp;
        <br /><br />
        关键字<input type="text" id="keyword" /> &nbsp;<button onclick="keywordSearch()">搜索</button>
        &nbsp;&nbsp;<button onclick="editTrans2Trad('#keyword')">->繁</button>
        &nbsp;&nbsp;<button onclick="editTrans2Simp('#keyword')">->简</button>
        <hr />
    </div>

    <!--表格-->
    <table id="table"></table>
    <br /><br /><br /><br /><br />
    <!--屏蔽列表确认框（暂时不使用）-->
    <div id="floatPlan" class="float" style="top:10%;left:10%;height:auto;width:20%;">
        <button onclick="$('#floatPlan').hide()">[X]</button><br />
        屏蔽物品的暗黑2Key列表如下:<br /><br />
        <textarea id="planStr" cols="20" rows="10"></textarea><br />
        <br />
        <button id="btnCopy" type="button">复制</button>
        <button id="btnGenJson" type="button" style="right: 0px;">生成json</button>
    </div>
    <!--底部浮动确认框-->
    <div id="floatBtnGenPlan" class="float" style="bottom:0%;left: 0%;height: fit-content;width: 100%;padding: 10;">
        &nbsp;&nbsp;&nbsp;&nbsp;<button type="button" id="btnGenPlan" style="transform: scale(1.5);">生成JSON</button>
    </div>
    <!--json生成框-->
    <div id="floatJson" class="float" style="top: 15%;left: 15%;height: fit-content;width: fit-content;">
        <button onclick="$('#floatJson').hide()">[X]</button><br />
        生成的json如下，直接点击下载按钮下载到本地<br />
        然后找到并覆盖 [游戏根目录]\mods\wing\wing.mpq\data\local\lng\strings\item-names.json<br />
        重启游戏应用屏蔽效果<br />
        为了防止不可测的结果，最好请备份原文件。<br/>
        *其他mod请替换wing至对应mod名<br />

        <hr />
        <textarea id="jsonStr" rows="30" cols="80"></textarea><br />
        <hr />
        <button id="btnCopy" type="button">复制</button>
        <button id="btnSave" type="button">保存</button>
    </div>
    <div id="standBy" class="float" style="top: 40%;left: 40%;">
        &nbsp;正在生成，请稍后...
    </div>
    <!--编辑面板-->
    <div id="panelEdit" class="float" style="top: 5%;left:15%;max-height:720px; width:fit-content;">
        <button onclick="$('#panelEdit').hide()">[X]</button>
        <hr />
        KEY:<a id="Key">KEY_NOT_FOUND</a><br />
        语言版本 <select id="lang" onchange="openPanelEdit(editPanelCtx.id,value)">
            <option value="zhTW">繁体中文</option>
            <option value="zhCN">简体中文</option>
            <option value="enUS">英文</option>
        </select>
        <hr />
        <div id="result" style="text-align: center;background-color: black;"></div>
        <hr />
        请在编辑框中输入颜色代码和文本，注意暗黑2中行序为倒序<br />
        <!-- <input type="text" id="d2text" style="width: fit-content;"> -->
        <textarea id="d2text" rows="5" cols="60"></textarea>
        <hr />
        <button onclick="editTrans2Trad('#panelEdit #d2text')">转化为繁体</button>
        <button onclick="editTrans2Simp('#panelEdit #d2text')">转化为简体</button>
        <br /><br />
        繁简转化代码来源<a href="https://www.aies.cn/" target="_blank" style="color: gold;">https://www.aies.cn/</a>
        <hr />
        <div id="colorAndChar" style="max-height:300px;overflow-y:scroll;line-height: 40px;">
            插入颜色:
            <div id="btnsColor"></div>
            <hr />
            插入字符:
            <div id="btnsChar"></div>
        </div>
        <hr />
        <input type="checkbox" id="autoTrans" checked />自动进行繁简翻译
        <input type="checkbox" id="autoSync"   />同步中文内容
        <hr />
        <button onclick="saveEdit()" style="align-self: center;">保存</button>
    </div>



</body>

</html>